<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
	  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
	<div class="container-div">
		<div class="row">
            <div class="btn-group hidden-xs" id="toolbar" role="group">
		        <a class="btn btn-outline btn-success btn-rounded" onclick="$.modal.open('上传图片','/system/picture/add')" shiro:hasPermission="system:picture:upload">
                    <i class="fa fa-plus"></i> 新增
                </a>

                <a class="btn btn-outline btn-danger btn-rounded" id="del"  onclick="del()">
                    <i class="fa fa-trash-o"></i> 删除
                </a>
	        </div>
	        <br>
       		 <div id="mydiv" class="col-sm-12 select-table table-striped">
	            <table id="bootstrap-table" data-mobile-responsive="true" >
	            
	            	<div  class="row">
			           <div class="col-xs-6 col-lg-3" style="margin-bottom:20px;" th:each="picture:${pictures.list}">
			           <div><input type="checkbox" th:value="${picture.pictureId}" style="width:20px;height:20px;" /></div>
			           	<a th:onclick="|$.modal.open('detail','/system/picture/detail/${picture.pictureId}')|">
							<img style="width:300px;height:300px;" th:src="@{'/'+${picture.thumbnailPath}}"/>
							<p th:text="${picture.fileName}">
						</a>	
						
			           </div>
		           </div>
		        <div class="pull-left pagination-detail">
		        <span class="pagination-info">
				第 <span th:text="${pictures.startRow}"></span> 到  <span th:text="${pictures.endRow}"></span> 条，
				共  <span th:text="${pictures.total}"></span> 条记录。 
				 <span th:text="${pictures.pageSize}"></span> 条记录每页
				</span>
				</div>
				<div class="pull-right pagination">
				
				<ul class="pagination pagination-outline" th:if="${pictures.hasPreviousPage}">
				<li><a th:href="@{/system/picture(num=${pictures.prePage})}"> 上一页 </a></li>
				</ul>
				<ul class="pagination pagination-outline"  th:each="num:${pictures.navigatepageNums}">
				<li><a th:text="${num}" th:href="@{/system/picture(num=${num})}"></a></li>
				</ul>
				<ul class="pagination pagination-outline" th:if="${pictures.hasNextPage}">
				<li><a th:href="@{/system/picture(num=${pictures.nextPage})}"> 下一页 </a></li>
				</ul>
				</div>
	            </table>
	        </div>

	    </div>
	</div>
					
	
	<div th:include="include :: footer"></div>

</body>
<script type="text/javascript">
function del(){
	var vals = [];
	$('input:checkbox:checked').each(function (index, item) {
        vals.push($(this).val());
    });
	var url="/system/picture/delete";
 
    $.modal.loading("正在处理中，请稍后...");
    $.ajax({
        url: url,
        data: {"ids":vals+''},
        dataType:'json',
        type: "post",
        success: function(result) {
        	$.modal.closeLoading();
        	window.location.href="/system/picture";
        }
    })
	
}
</script>
</html>